<!--  -->
<template>
    <div>
        <Card>
            <div slot="title" >
                <Button v-if="btnp.cggl_pzlbiao_xzpz" @click="handleClickAdd" class="zh-hollow" type="primary" icon="plus-round">新增凭证</Button>
                <Button v-if="btnp.cggl_pzlbiao_plxz" @click="modal_batch=true" style="marginLeft:25px;" class="zh-hollow" type="warning" >批量新增</Button>
            </div>
            <Form :model="formItem" :label-width="60">
                <Row :gutter="10" type="flex"  align="middle"  >
                    <Col span="8">
                        <FormItem label="名称">
                            <Input v-model="formItem.name" placeholder="凭证名称" clearable></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="供应商">
                            <Select v-model="formItem.supplier_uuid" filterable>
                                <Option  v-for="item in moreSupplierList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="凭证类型">
                            <Select v-model="formItem.type_uuid" filterable>
                                <Option  v-for="item in moreTypeList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                
        
                    <Col span="8">
                        <FormItem label="状态">
                            <Select v-model="formItem.status" >
                                <Option  v-for="item in stateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                
                    <Col span="12">
                        <FormItem label="新增时间">
                            <DatePicker v-model="timeRange" format="yyyy-MM-dd HH:mm" type="datetimerange" placement="bottom-end" placeholder="请选择开始和结束时间"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="10" >
                    <Col span="8" offset="16"  style="text-align:right;">
                        <Button @click='handleClickgetTable' class="zh-hollow" type="primary" icon="ios-search-strong">搜索</Button>
                        <!-- <Button v-if="btnp.cggl_pzlbiao_dc" class="zh-hollow" type="warning" style="margin-left:25px;">导出EXCEL</Button> 
                        -->
                        <!-- <a style="margin-left:25px;" v-if="btnp.cggl_pzlbiao_dc" :href="downLoadUrl" target="_blank"><Button  class="zh-hollow" type="warning"  > 导出EXCEL </Button></a> -->
                    </Col>
                
                </Row>
            </Form>
        </Card>
        <Card style="margin-top:10px;" :padding="0">
            <Table :loading="loading" border :columns="columns" :data="data"></Table>
            <Page  :total="total" show-total show-sizer :current.sync="formItem.pageNumber" @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
        </Card>
        <Modal v-model="modal_batch" title="批量新增" class="zh-modal-form" class-name="vertical-center-modal">
            <div style="padding:15px 30px;">
                <p>从本地选择Excel格式的凭证列表，批量导入凭证。</p>
                <a :href="url_pzListTempDc" target="_blank"><Button type="text" style="color:#2d8cf0" >下载Excel模板</Button></a>
            </div>
            <div slot="footer" class="zh-flex zh-flex-5 excel" style="width:100%;">
                    <Button @clcik="modal_batch=false;" type="ghost">放弃操作</Button>
                    <Upload 
                    ref="upload"
                    :with-credentials="true"
                    :on-success="handleSuccessExcel"
                    :on-progress="handleProgressExcel"
                    :format="['xlsx','xls']"
                    :on-format-error="handleFormatErrorExcel"
                    :before-upload="handleBeforeUploadExcel"
                    :action="dr_url_pzlb">
                        <Button type="primary" :loading="btnloading" class="zh-hollow">选择文件</Button>
                    </Upload>
            </div>
        </Modal>
        <Modal v-model="modal_info" :title="infotitle" :loading="saveloading" @on-ok="save" ok-text="保存" cancel-text="放弃操作" :class="classes">
            <Form v-if="infotype==='view'" :label-width="80" :model="information" style="padding:15px 30px;">
                <FormItem label="供应商：">
                    {{information.supplier}}
                </FormItem>
                <FormItem label="凭证类型：">
                    {{information.type}}
                </FormItem>
                <FormItem label="凭证名称：">
                    {{information.name}}
                </FormItem>
                <FormItem label="存货代码：">
                    {{information.inventorycode}}
                </FormItem>
                <FormItem label="规格型号：">
                    {{information.description}}
                </FormItem>
                <FormItem label="单位：">
                    {{information.unit}}
                </FormItem>
                <FormItem label="单价(元)：">
                    {{information.price}}
                </FormItem>
                <FormItem label="备注：">
                   {{information.remarks}}
                </FormItem>                                                
            </Form>
            <Form v-else :label-width="80" :model="information" style="padding:15px 30px;">
                <FormItem label="供应商*">
                    <Input v-if="infotype=='edit'" readonly v-model="information.supplier"></Input>
                    <Select v-else v-model="information.supplier_uuid" filterable @on-change="supplierChange">
                        <Option  v-for="item in supplierList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="凭证类型*">
                    <Select v-if="information.supplier_uuid.length<=0" v-model="information.type_uuid" filterable :disabled="information.supplier_uuid.length<=0">
                        <Option   v-for="item in typeList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                    </Select>
                    <Select v-if="information.supplier_uuid.length>0&&typeFlag" v-model="information.type_uuid" filterable >
                        <Option   v-for="item in typeList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="凭证名称*">
                    <Input v-model="information.name" :maxlength="20"></Input>
                </FormItem>
                <FormItem label="存货代码">
                    <Input v-model="information.inventorycode" ></Input>
                </FormItem>
                <FormItem label="规格型号*">
                    <Input v-model="information.description" ></Input>
                </FormItem>
                <FormItem label="单位*">
                    <Input v-model="information.unit" :maxlength="10"></Input>
                </FormItem>
                <FormItem label="单价(元)*">
                    <input type="text" class="ivu-input"  @input="newVal(iinformation.price)"   v-model="information.price" >
                    <!-- <Input v-model="information.price" ></Input> -->
                </FormItem>
                <FormItem label="备注">
                    <Input :maxlength="20" v-model="information.remarks" ></Input>
                </FormItem>                                                
            </Form>
        </Modal>
    </div>
</template>

<script>
import {url_pzListDc,url_pzListTempDc,dr_url_pzlb} from '@/libs/downLoadUrl'
import accounting from 'accounting'
import util from '@/libs/util.js'
import {
    getVoucList,
    getVoucherProvideList,
    purVoucFreezon,
    deletePurVoucList,
    saveVoucPurList,
    getVoucherTypeList
} from '@/libs/purchase.js'
export default {
    name:'',
    data () {
        return {
            typeFlag:true,
            url_pzListTempDc:url_pzListTempDc,
            btnloading:false,
            dr_url_pzlb:dr_url_pzlb,
            downLoadUrl:url_pzListDc,
            user_type:'',
            userUuid:'',
            saveloading:true,
            btnp:{},
            btn:{
                cggl_pzlbiao_xzpz:false,
                cggl_pzlbiao_plxz:false,
                cggl_pzlbiao_dc:false,
                cggl_pzlbiao_xq:false,
                cggl_pzlbiao_bj:false,
                cggl_pzlbiao_tzgy:false,
                cggl_pzlbiao_hfgy:false,
                cggl_pzlbiao_sc:false,
            },
            information:{
                uuid:'',
                name:'',
                supplier:'',
                supplier_uuid:'',
                type:'',
                type_uuid:'',
                description:'',
                inventorycode:'',
                unit:'',
                price:'',
                remarks:''
            },
            classes:'',
            modal_info:false,
            infotype:'',//add,edit,view
            infotitle:'',
            loading:true,
            total:0,
            modal_batch:false,
            timeRange:[],
            formItem:{
                name:'',
                supplier_uuid:'全部',
                type_uuid:'全部',
                status:'全部',
                pageNumber:1,
                pageSize:10
                
            },
            typeList:[],
            moreTypeList:[],
            moreSupplierList:[],
            supplierList:[],
            stateList:[
                {
                    label:'全部',
                    value:'全部'
                },{
                    label:'供应中',
                    value:'0'
                },{
                    label:'停止供应',
                    value:'1'
                }
            ],
            columns:[
                {
                    key:'supplier_name',
                    title:'供应商',
                    fixed:'left',
                    minWidth:140
                },
                {
                    key:'type_name',
                    title:'凭证类型',
                    minWidth:100
                },
                {
                    key:'name',
                    title:'凭证名称',
                    minWidth:130
                },
                {
                    key:'statusNm',
                    title:'状态',
                    minWidth:100,
                    align:'center'
                },
                {
                    key:'time',
                    title:'新增时间',
                    minWidth:150,
                    align:'center'
                },

                {
                    key:'action',
                    title:'操作',
                    align:'center',
                    fixed:'right',
                    minWidth:180,
                    render:(h,params)=>{
                        let status=params.row.status;
                        let uuid=params.row.uuid;
                        return h('div',[
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0',
                                display:this.btnp.cggl_pzlbiao_xq?'inline-block':'none'
                                },
                                on:{
                                click:()=>{
                                   this.modal_info=true;
                                    this.infotype='view';
                                    this.gotoEdit(params.row);
                                }
                                }
                            },'详情'), 
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0',
                                 display:this.btnp.cggl_pzlbiao_bj?'inline-block':'none'
                                },
                                on:{
                                click:()=>{
                                    this.modal_info=true;
                                    this.infotype='edit';
                                    this.gotoEdit(params.row);
                                    this.getType(params.row.supplier_uuid);
                                }
                                }
                            },'编辑'), 
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0',
                                 display:this.btnp.cggl_pzlbiao_tzgy?status=='0'?'inline-block':'none':'none'
                                },
                                on:{
                                    click:()=>{
                                        let config={
                                            title:'停止供应',
                                            content:'停止供应后，不能再对该项凭证进行申领。',
                                            okText:'停止供应',
                                            cancelText:'放弃操作',
                                            onOk:()=>{
                                                this.freezon(uuid,'freezon')
                                            }
                                        }
                                        this.$Modal.confirm(config)                                                                        
                                    }
                                }
                            },'停止供应'), 
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0',
                                 display:this.btnp.cggl_pzlbiao_hfgy?status=='1'?'inline-block':'none':'none'
                                },
                                on:{
                                click:()=>{
                                    let config={
                                        title:'恢复供应',
                                        content:'恢复供应后，可以继续对该项凭证进行申领。',
                                        okText:'恢复',
                                        cancelText:'放弃操作',
                                        onOk:()=>{
                                            this.freezon(uuid,'unfreezon')
                                        }
                                    }
                                    this.$Modal.confirm(config)
                                    
                                }
                                }
                            },'恢复供应'),                                                                                                                
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#EA0000',
                                 display:this.btnp.cggl_pzlbiao_sc?status=='0'?'inline-block':'none':'none'
                                },
                                on:{
                                click:()=>{
                                    let config={
                                    title:'删除凭证',
                                    content:'删除后该凭证无法查询，也无法恢复。',
                                    okText:'删除',
                                    cancelText:'放弃操作',
                                    onOk:()=>{
                                       this.delete(uuid);
                                    }
                                    }
                                    this.$Modal.confirm(config)
                                }
                                }
                            },'删除')
                        ])
                    }
                }
            ]    ,
            data:[] 
        };
    },
    methods:{
        handleSuccessExcel(res, file){
            if(res.code==200){
                this.$Notice.success({
                    desc:res.msg
                });
                this.modal_batch=false;
                this.getTable();
            }else{
                this.$Notice.error({
                    desc:res.msg
                })
            }
            this.btnloading=false;
        },
        handleProgressExcel(){
            this.btnloading=true;
        },
        handleBeforeUploadExcel(){

        },
        handleFormatErrorExcel (file) {
            this.$Notice.warning({
                title: '文件格式错误',
                desc: '请选择 xlsx 或 xls 格式的文件'
            });
        },
        async save(){
            if(this.information.supplier_uuid.length<=0){
                this.$Notice.error({
                    desc:'请选择供应商'
                })
            }else if(this.information.type_uuid.length<=0){
                this.$Notice.error({
                    desc:'请选择类型'
                })
            }else if(this.information.name==''){
                this.$Notice.error({
                    desc:'请输入凭证名称'
                })
            }else if(this.information.name.length<3){
                this.$Notice.error({
                    desc:'名称须多于2个字'
                })
            }else if(this.information.description==''){
                this.$Notice.error({
                    desc:'请输入规格型号'
                })
            }else if(this.information.unit==''){
                this.$Notice.error({
                    desc:'请输入单位'
                })
            }else if(this.information.price==''){
                this.$Notice.error({
                    desc:'请输入单价'
                })
            }else{
                let form =JSON.parse(JSON.stringify(this.information));
                let res=await saveVoucPurList(form);
                let response=res.data;
                if(response.code==200){
                    this.$Notice.success({
                        desc:'已保存'
                    });
                    this.getTable();
                    this.modal_info=false;
                }else{
                    this.$Notice.error({
                        desc:response.msg
                    })
                }
            }
            let that=this;
            this.saveloading=false;
            setTimeout(()=>{
                that.saveloading=true;
            },500)
        },
        newVal(index,val){
            let price=util.amount(val);//accounting.formatMoney(accounting.unformat(util.amount(val)),'',2,',');
            this.information.price=price;
        },
        gotoEdit(obj){
            this.information={
                uuid:obj.uuid,
                name:obj.name,
                supplier:obj.supplier_name,
                supplier_uuid:obj.supplier_uuid,
                type:obj.type_name,
                type_uuid:obj.type_uuid,
                description:obj.description,
                inventorycode:obj.inventorycode,
                unit:obj.unit,
                price:accounting.formatMoney(accounting.unformat(util.amount(obj.price)),'',2,','),
                remarks:obj.remarks
            }
        },
        async freezon(uuid,flag){
            let res=await purVoucFreezon(uuid,flag);
            let response=res.data;
            if(response.code==200){
                this.$Notice.success({
                    desc:flag=='freezon'?'已停止供应':"已恢复"
                });
                this.getTable();
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },
        async delete(uuid){
            let res=await deletePurVoucList(uuid);
            let response=res.data;
            if(response.code==200){
                this.$Notice.success({
                    desc:"已删除"
                });
                this.handleClickgetTable();
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },
        async supplierChange(value){
            this.typeFlag=false;
            this.information.type_uuid='';
            await this.getType(value);
            this.typeFlag=true;
        },
        async getType(uuid){
            this.typeList=[];
            let res=await getVoucherTypeList(uuid);
            let response=res.data;
            if(response.code==200){
                this.typeList=response.data;
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },
        async getMoreType(){
            let res=await getVoucherTypeList();
            let response=res.data;
            if(response.code==200){
                this.moreTypeList=[{name:'全部',uuid:'全部'},...response.data];
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },
        async getProvide(){
            let res=await getVoucherProvideList('supply');
            let response=res.data;
            if(response.code==200){
                this.moreSupplierList=[{name:'全部',uuid:'全部'},...response.data];
                this.supplierList=response.data;
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },
        pageSizeChange(size){
            //回到第一页
            this.formItem.pageNumber=1;
            this.formItem.pageSize=size;
            this.getTable();
        },
        pageChange(number){
            this.formItem.pageNumber=number;
            this.getTable();
        },
        handleClickgetTable(){
            this.formItem.pageNumber=1;
            this.getTable();
        },
        async getTable(){
            this.loading=true;
            let form=JSON.parse(JSON.stringify(this.formItem));
            for(let key in form){
                if(form[key]==='全部'){
                form[key]='';
                }
            }
            if(!!this.timeRange[0]&&this.timeRange.length>0){
                form.startTime=util.time1(this.timeRange[0]);
                form.endTime=util.time1(this.timeRange[1]);
            }
            
            let res=await getVoucList(form);
            if(res.status===200){
                let response=res.data;
                if(response.code===200){
                    this.total=response.data.total;
                    this.data=response.data.rows.map(item=>{
                        item.time=item.created.slice(0,16);
                        return item
                    })
                    this.loading=false;
                    this.downLoadUrl=`${url_pzListDc}${util.pjArgu(form)}`;
                }else{
                    this.$Notice.error({
                        desc:response.msg
                    });
                }
            }else{
                this.$Notice.error({
                    title: '请求失败'
                });
            } 
        },
        handleClickAdd(){
            this.information={
                uuid:'',
                name:'',
                supplier:'',
                supplier_uuid:'',
                type:'',
                type_uuid:'',
                description:'',
                inventorycode:'',
                unit:'',
                price:'',
                remarks:''
            };
            this.modal_info=true;
            this.infotype='add';
        }
    },
    watch:{
        infotype:function(){
            this.infotitle=this.infotype==="add"?'新增凭证':this.infotype==='edit'?'编辑凭证信息':'凭证详情';
            this.classes=this.infotype==="view"?'no_footer_modal':'';
        },
        modal_info:function(){
          if(!this.modal_info){
              this.typeList=[];
          }  
        }
    },
    created(){
        util.isCustomer(this);
        this.btnp=util.bpower(this,this.btn);
        this.getTable();
        this.getProvide();
        this.getMoreType();
    },

}

</script>
<style lang='scss' >
.excel .ivu-upload-list{
    display:none!important;
}
</style>